<template>
  <xdh-window class="xdh-dialog"
              :title="title"
              :icon="icon"
              :width="width"
              :height="height"
              :max-height="maxHeight"
              :top="top"
              :left="left"
              :closed.sync="dialogClosed"
              :draggable="draggable"
              :resizable="resizable"
              :append-to-body="true"
              footer-height="60px">
    <slot></slot>
    <slot name="footer" slot="footer"></slot>
  </xdh-window>
</template>

<script>
  /**
   * 对话框组件
   * @module widgets/xdh-dialog
   * @author 陈华春
   */
  import XdhWindow from '../xdh-window'

  /**
   * 插槽
   * @member slots
   * @property {string} default 对话框内容
   * @property {string} footer 底部内容
   */

  /**
   * @export
   */
  export default {
    name: 'XdhDialog',
    components: {
      XdhWindow
    },
    /**
     * 参数属性, 继承 [xdh-window]{@link module:widgets/xdh-window}
     * @member porps
     *
     */
    props: {
      ...XdhWindow.props
    },
    data () {
      return {
        dialogClosed: this.closed
      }
    },
    watch: {
      dialogClosed (isClosed) {
        isClosed ? this.$emit('on-close') : this.$emit('on-open')
        this.$emit('update:closed', isClosed)
      },
      closed (val) {
        this.dialogClosed = val
      }
    },
    mounted () {
      this.dialogClosed ? this.$emit('on-close') : this.$emit('on-open')
    }
  }
</script>
